<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="<s:url value="/css/style.css"/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value="/js/simpletooltip.css"/>" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript"
			src="<s:url value="/js/jquery-1.3.2.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-1.7.2.custom.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.scrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.Hscrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-Draggable.1.7.1.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.blockUI.js"/>"></script>
 		<script type="text/javascript">
		function doSelect(divid,entityid,date,time,teacher) {
		    var td=$('#divid').attr('value');
		    if (td){
		          $("#"+td).css("font-weight","normal");
		    };
		    if (entityid===-1){
		       $("#entityid").val("") ;
		       $("#divid").val("");
		       $("#seldate").val("") ;
		       $("#seltime").val("");
		       $("#selfocus").val("");
		       $("#selteacher").val("");
		    }else{
		       $("#entityid").val(entityid) ;
		       $("#divid").val(divid);
		       $("#seldate").val(date) ;
		       $("#seltime").val(time);
		       var f=$("#"+divid).html();
		       $("#selfocus").val(f);
		       $("#selteacher").val(teacher);
		       $("#"+divid).css("font-weight","bolder");
		    };
	    };
	
	    function doBooking(type,confirm)
         {    
             var order= $('#bookingOrder').attr('value');
             if (order){
                if ((order!=1)&&(order!=2)){
                   alert("please select 1 or 2 as order!");
                   return;
                }
             }
             //alert(type);
             $.blockUI({ css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: .5, 
                    color: '#fff' 
                } });  
             var url = "<s:url value="/academic/ClassBooking/doBooking.action"/>";
             var params = {
                selClassEntityId:$('#entityid').attr('value'),
                selLeadsId:$('#leadsid').attr('value'),
                bookingComments:$('#bookingComments').attr('value'),
                bookingOrder:$('#bookingOrder').attr('value'),
                type:type,
                confirm:confirm
             };
             jQuery.post(url, params, callbackFun);
          };
 
         function callbackFun(data)
         {
              setTimeout($.unblockUI, 10); 
              $(data).find('response').each(function(){　　　　　　　　　　　　　　　　　　
　 　　　　　　　　  var type= $(this).children("type").text() ;
                  if (type==="ok"){
                      var info=$(this).children("info").text() ;
                      $("#info").val(info);
                      var td=$('#divid').attr('value');
                   // alert($("#"+td).val());
                      $("#"+td).attr("bgcolor", $(this).children("color").text() );
                      $("#"+td).attr("title", $(this).children("title").text() );
                      $("#"+td).html($(this).children("value").text());
                  }else if  (type==="warn"){
                       var msg=$(this).children("info").text();
                       $("#info").val(msg);
                        var type= $(this).children("dotype").text() ;
                        var confirmmsg= $(this).children("confirm").text() ;
                        if(confirm(msg)){
		                   doBooking(type,confirmmsg);
	                   }else{ 
	                       return;
 	                   }
                  }else if  (type==="error"){
                      $("#info").val($(this).children("info").text());
                      alert($(this).children("info").text());
                  }
  　　　　　　　 });
 　　　      };
 	    $( document ).ready( function ()
			{
			   $( '#topdiv' ).scrollFollow(
					{
						speed: 1,
						offset:0 
					}
				);
				$( '#leftdiv' ).HscrollFollow(
					{
						speed: 1,
						offset:0 
					}
				);
				$('#floatdiv').draggable();
 			}
		);
</script>
<style type="text/css">
#tdwithtooltip {
	cursor: pointer;
}

#simpleTooltip {
	padding: 7px;
	border: 1px solid #A6A7AB;
	background: #F2F3F5;
}

#topdiv {
	position: absolute;
	z-index: 2;
	width: < s :property value ="teachers.size()*180+300"/> px;
	height: 30px;
	background-color: #00FFFF;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#leftdiv {
	position: absolute;
	top: 40px;
	z-index: 1;
	margin: 0px;
	width: 178px;
	background-color: #00FFFF;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#floatdiv {
	position: fixed;
	left: 400px;
	top: 100px;
	z-index: 3;
	width: 500 px;
	background-color: #FFFFFF;
	margin: 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
	border: 6px solid #42CBDC;
	z-index: 3;
}
#bookingtable {
	position: relative;
	top: 34px;
	z-index: 0;
	background-color: #EBEBEB;
}
</style>
	<title><s:text name="system.title" /></title>
	</head>
	<body>
        <div id="floatdiv">
			<table>
				<tr>
					<td colspan="2">
						<fieldset>
							<legend>
								Student Info:
							</legend>
							<label>
								Name:<s:property value="selLeads.name"/>
							</label>
                            <br />
							<label>
								EliteCard:<s:property value="selLeads.eliteCard"/>
							</label>
							<br />
							<label>
								Level:<s:property value="selLeads.currentlevel"/>
								|VIP:<s:property value="selLeads.isVIP"/>|Punish:<s:property value="selLeads.needPunish"/>
							</label>
							<br />
							<s:if test="selLeads.needJudgeNetLevel"  >
							<label>
							    NET:L<s:property value="selLeads.netLevel"/>|
							    U<s:property value="selLeads.netLevelUnit"/>|
							    <s:date name="selLeads.changeNetLevelTime" format="yy-MM-dd"/>
							</label>
							</s:if>
							<br />
							<label>
								Cancel Times In Week:<s:property value="selLeads.cancelTimesInWeek"/>
							</label>
						</fieldset>
					</td>
					<td colspan="2">
						<fieldset>
							<legend>
								Select Info:
							</legend>
							<input id="entityid" type="hidden" value="" />
							<input id="divid" type="hidden" value="" />
							
							<label>
								Date:<input id="seldate" type="text" readonly="readonly" style="border-color:black; border-bottom: 2;border-left: 0;border-right: 0;border-top:0" />
							</label>
							<br/>
							<label>
								Time:<input id="seltime" type="text"  readonly="readonly" style="border-color:black; border-bottom: 2;border-left: 0;border-right: 0;border-top:0"/>
							</label>
							<br/>
							<label>
								Class:<input id="selfocus" type="text"  readonly="readonly" style="border-color:black; border-bottom: 2;border-left: 0;border-right: 0;border-top:0" />
							</label>
							<br/>
							<label>
								Teacher:<input id="selteacher" type="text" readonly="readonly" style="border-color:black; border-bottom: 2;border-left: 0;border-right: 0;border-top:0" />
							</label>
						</fieldset>
					</td>
					<td>
						<table>
							<tr>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_SELECTED_COLOR"/>">
									SELECTED
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_WAIT_COLOR"/>">
									WAIT
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_CHECKIN_COLOR"/>">
									CHECKIN
								</td>
							</tr>
							<tr>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_ABSENCE_COLOR"/>">
									ABSENCE
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_PUNISH_COLOR"/>">
									PUNISH
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_FULL_COLOR"/>">
									FULL
								</td>
							</tr>
							<tr>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FFREE_COLOR"/>">
									F2F FREE
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FMATCH_COLOR"/>">
									F2F MATCH
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FUNMATCH_COLOR"/>">
									F2F UNMATCH
								</td>
							</tr>
							<tr>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FCHINESE_COLOR"/>">
									F2F CHINESE
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FALL_COLOR"/>">
									F2F ALL
								</td>
								<td
									bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FFULL_COLOR"/>">
									F2F FULL
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
				  <td colspan="5">  <input readonly="readonly"  id="info" size="80"  / > </td>
				</tr>
				<tr>
					<td>
						<input type="button" value="BOOKING"
							onclick="javascript:doBooking('NORMAL','0');" />
						<br/>
						<input type="button" value="CANCEL" 
						    onclick="javascript:doBooking('CANCEL','0');"  />
					</td>
					<td>
				    	<input type="button" value="PSA BOOKING" 
				    	    onclick="javascript:doBooking('PSA','0');"  />
				    	<br/>
						<input type="button" value="VIP BOOKING" 
						   onclick="javascript:doBooking('VIP','0');"  />
					</td>
					<td>
				    	Order:<input type="text" id="bookingOrder" name="bookingOrder"  value="" size="20" />
				    	<br/>
						Comments:<input type="text"  id="bookingComments" name="bookingComments"  value="" size="20" />
					</td>
					<td rowspan="2" colspan="3" >	
					    <input type="button" value="CLOSE WINDOW"
							onclick="window.close();" />
					</td>
				</tr>
			</table>
		</div>
		<div id="topdiv">
		   <s:form action="ClassBooking/beforeBooking" method="post">
			<table border="1" bordercolor="black"
				width="<s:property value="teachers.size()*180+169" />"
				style="table-layout: fixed;">
				<s:hidden id="leadsid" name="selLeadsId" />
				<tr height="28px">
					<th width="169">
						<s:select list="{2008,2009,2010,2011}" name="year">
						</s:select>
						<s:select
							list="{1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52}"
							name="week">
						</s:select>
						<input type="submit" value="re"/>
					</th>
					<s:iterator value="teachers">
						<th width="180">
							<s:property value="name" />
						</th>
					</s:iterator>
				</tr>
			</table>
			</s:form>
		</div>
		<div id="leftdiv">
			<table width="180" border="1">
				<s:iterator value="days" status="st">
					<tr>
						<s:if test="#st.index%10==0">
							<td rowspan="10" bgcolor="#FFFFFF" width="80"
								style="word-wrap: break-word; word-break: break-all;">
								<s:set name="bday" />
								<s:date name="bday" format="E" />
								<br />
								<s:date name="bday" format="yyyy-MM-dd" />
							</td>
						</s:if>
						<td bgcolor="#FFFFFF" width="80">
							<s:property  value="timeline.get(#st.index%10)" />
						</td>
					</tr>
				</s:iterator>
			</table>
		</div>
		<%
			int i = 1;
		%>
		<table id="bookingtable" bordercolor="black"
			width="<s:property value="teachers.size()*180+180" />"
			style="table-layout: fixed;" border="1">
			<s:iterator value="days" status="st">
				<tr>
					<s:if test="#st.index%10==0">
						<s:set name="bday" />
					</s:if>
					<s:set name="btime" value="timeline.get(#st.index%10)" />
					<td width="167px">

					</td>
					<s:iterator value="teachers">
					    <s:set name="clId"  value="bookingClassEntityUnit.getClassEntityId(#bday,#btime,id)"/> 
						<td align="center" width="180" id="<%=i%>"
							bgcolor="<s:property value="bookingClassEntityUnit.getClassEntityColor(#bday,#btime,id)"/>"
							class="tdwithtooltip"
							title="<s:property   escape="false" value="bookingClassEntityUnit.getClassEntityToolTip(#bday,#btime,id)"/>"
							onclick="javescript:doSelect(<%=i++%>,<s:property value="%{#clId}"/>,'<s:property value="%{#bday}"/>','<s:property value="%{#btime}"/>','<s:property value="%{name}"/>');">
						    <s:if test="%{#clId!='-1'}"> 
							  <s:property value="bookingClassEntityUnit.getClassEntityInfo(#bday,#btime,id)" /> 
						    </s:if>
							<s:else>
						       &nbsp;
							</s:else>
						</td>
					</s:iterator>
				</tr>
			</s:iterator> 
		</table>
	</body>
</html>